<template>
  <div class="new full-height bg-white page-content radius">
    <div class="full-height " style="padding: 20px" >
      <!--  正文-->
      <q-scroll-area  ref="scrollTargetRef" style="margin: 0 10px;flex: 1;height: calc(100% - 54px)" :thumb-style="thumbStyle">
        <q-infinite-scroll :offset="250" :scroll-target="$refs.scrollTargetRef"  ref="scrollTarget">
          <div class="row justify-center q-my-md" v-if="loading">
            <q-spinner-dots color="primary" size="40px" />
          </div>
          <div style="padding: 0 15% ; font-size: 14px;" v-else>
            <div class="box-wrapper flex justify-between" v-for="(data, index) in detailData" :key="index">
              <div class="left">
                <div class="date">{{data.days | toTime }}</div>
                <div class="info flex items-center" v-for="item in data.list" :key="item.id" @click="goDetail(item.id)">
                  <div class="circle"></div>
                  <div class="text-ellipsis text-size">{{item.title}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="text-center margin-t-20 fixed-btn">
            <q-btn class="btn"
                   style="width: 96px"
                   unelevated
                   color="primary"
                   @click="$router.go(-1)"
                   label="返回" />
          </div>
        </q-infinite-scroll>
      </q-scroll-area>

    </div>
  </div>
</template>

<script>
import { getNewsList } from '../../../boot/home/home-new'

export default {
  name: 'news-detail_2',
  data () {
    return {
      loading: false,
      detailData: [],
      // 滚动条样式
      thumbStyle: this.CommonConfig.thumbStyle
    }
  },
  mounted () {
    this.loading = true
    getNewsList().then(res => {
      this.detailData = res.data
    }).finally(() => {
      this.loading = false
    })
  },
  methods: {
    goDetail (id) {
      this.$router.push({
        path: `/main/home/news/news-detail_1`,
        query: {
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .radius{
    border-radius 6px
  }
  .text {
    font-weight bold
    font-size 16px
    display block
  }
  .fixed-btn{
    position fixed
    bottom 44px;
    left 50%;
    transform translateX(-48px)
  }
  .box-wrapper{
    margin-bottom 10px
    .left{
      width 444px
      .info{
        cursor pointer
      }

      .date{
        font-size: 16px;
        font-weight: 500;
        color: #5F77FD;
        line-height: 2
      }

      .circle{
        width: 10px;
        height: 10px;
        background: #F7B82D;
        border-radius: 50%;
        margin-right 6px
      }

      .text-size{
        width calc(100% - 20px)
      }
    }

    .more{
      font-size: 14px;
      font-weight: 500;
      color: #999999;
      margin-top 8px
      cursor pointer
    }
  }
</style>
